<% content_for :head do %>
  <script type="text/javascript">
    var map;
    window.onload = addCodeToFunction(window.onload,function() {
      Spots.load();
    });
  </script>
<% end %>


<div id="choices">
  <form id="hubform" onsubmit="Spots.rehub('', true);return false;">
      Hub: <%= text_field_tag :hubaddress, "13 Magazine St. Cambridge, MA 02139", {:size => 60} %>
      <%= submit_tag "Recenter" %>
  </form>

  <%= form_remote_tag :url => {:controller => "cities", :action => 'queryjs'}, :html => {:id => "mainform"} %>
    <table>
      <tr>
        <td rowspan="2">
          <%= select_tag "spottype[]", options_for_select(
      [['Restaurant', 'R'], ['Bar', 'B'], ['Store', 'S']], [ 'R' ] ), {:multiple => true, :size => 3} %>
        </td>
    <!--
        <th>Open Before</th>
        <th>Open After</th>
    -->
        <th>Name</th>
        <th>How Many</th>
        <th>Distance</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
    <!--
        <td><%= text_field_tag :openbefore, "", {:size => 5} %></td>
        <td><%= text_field_tag :openafter, "", {:size => 5} %></td>
    -->
        <td><%= text_field_tag :namefragment, "", {:size => 9} %></td>
        <td><%= text_field_tag :nearesthowmany, "10", {:size => 3} %></td>
        <td><%= text_field_tag :distance, "1", {:size => 3} %></td>
        <td>
          <%= hidden_field_tag :city, "Boston" %>
          <%= hidden_field_tag :lat, "42.400245" %>
          <%= hidden_field_tag :lng, "-71.124967" %>
        <%= submit_tag "Search" %>
        </td>
      </tr>
    </table>
    <%= hidden_field_tag :sortcolumn, "distance" %>
    <%= hidden_field_tag :sortdirection, "ascending" %>
  <%= end_form_tag %>
</div>

<div id="map" style="width: 700px; height: 700px; float: left;"></div>

<div id="message"></div>

<div id="resultsdiv">
  <div id="sortingindicator" style="display:none">Sorting...</div>
    <table id="results" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th id="col_seqnum">T</th>
          <th id="col_name">Name</th>
          <th id="col_distance">Distance</th>
  <!--
          <th id="col_opensat">Opens</th>
          <th id="col_closesat">Closes</th>
  -->
        </tr>
      </thead>
      <tbody id="resultsbody">
        <tr>
          <td colspan="9" align="center">Nothing selected yet</td>
        <tr>
      </tbody>
    </table>
  </div>

  <div id="imagesdiv" style="display:none">
      <img id="spotimg" />
      <a href="#" onclick="Spots.prevImage(); return false">prev</a>
      <a href="#" onclick="Spots.nextImage(); return false">next</a>
      <br/>
      <a href="#" onclick="Effect.Fade('imagesdiv'); return false">close</a>
  </div>

  <div id="descriptiondiv" style="display:none">
      Description goes here.
  </div>
</div>
